<template>
  <div><img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <button @click="change2">test</button>
    <h1>{{name}}</h1>
    <h3>{{obj2.name}}</h3>
    <Son msg='fa的话' msg2='又说了一点' @hello='faPrepareForSon'>
      <!-- 这种写法子组件context里面拿不到，vue3推荐第二种写法 -->
      <!-- <template slot='myslot'> -->
      <template v-slot:myslot>
        <span>插入的内容</span>
      </template>
    </Son>
    <input type="text" v-model="obj3.firstName">
    <br />
    <input type="text" v-model="obj3.lastName">
    <br />
    <input type="text" v-model="obj3.fullName">
    <button @click='sum++'>sum</button>
    <button @click='sum2+=2'>sum2</button>
    <button @click='sumObj.name+="!"'>sumObj</button>
    <button @click='sumObj.age+=1'>sumObj</button>
    <button @click='sumObj2.person.age+=1'>sumObj2</button>
  </div>
</template>

<script>
import { h, ref, reactive, computed, watch, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import Son from "./components/Son.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    Son,
  },
  setup() {
    // 把数据变成响应式
    let name = ref("carlos");
    // let name='carlos'
    let age = 25;
    const obj = ref({
      name: "carlos2",
    });
    let sum = ref(0);
    let sum2 = ref(1);
    const obj2 = reactive({
      name: "carlos3",
    });
    const obj3 = reactive({
      firstName: "carlos",
      lastName: "Wong",
    });
    const sumObj = reactive({
      name: "carlos",
      age: 25,
    });
    const sumObj2 = ref({
      person: {
        name: "carlos",
        age: 25,
      },
    });
    // 简写，computed里面放一个方法,3里面不用this!
    // 简写的缺点：如果想通过修改computed的值反向影响数据源就不行，必须用完整的写法！
    /* obj3.fullName=computed(function(){
      return obj3.firstName+'-'+obj3.lastName
    }) */
    // 完整写法有一点想 new VUE写法，里面放一个对象
    obj3.fullName = computed({
      /* get(v) {
        return v;
      }, */
      // 错啦！get应该这么写
      get() {
        return obj3.firstName + "-" + obj3.lastName;
      },
      set(v) {
        obj3.firstName = v.split("-")[0];
        obj3.lastName = v.split("-")[1];
      },
    });
    watchEffect(()=>{
      let x1=sumObj.name;
      let x2=sum.value
      console.log('watchEffect');
    })
    
    function say() {
      console.log(`我${name}${age}`);
    }
    function change() {
      // 直接这样修改，数据层变了，但是视图层没有变
      // name = "贾诩";
      // 经过ref方法包装后的数据会变成一个对象，如果要修改必须修改它的value属性
      name.value = "贾诩";
      console.log(name);
    }
    function change2() {
      console.log("obj2", obj2);
      obj2.name = "贾诩";
      // obj2.name.value='贾诩'
    }
    // 父亲准备的方法，留着被子组件调用
    function faPrepareForSon(value) {
      console.log("faForSon!", value);
    }
    return {
      name,
      age,
      say,
      change,
      obj,
      change2,
      obj2,
      faPrepareForSon,
      obj3,
      sum,
      sum2,
      sumObj,
      sumObj2,
    };
    // return () => h("h1", "尚硅谷");
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
